import 'package:flutter/material.dart';
/// column_demo.dart
///

void main() => runApp(const MaterialApp(home: DemoColumnWidget(),));

class DemoColumnWidget extends StatelessWidget {
  const DemoColumnWidget({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('ch14 column demo')),
      // body: const MyColumn()
      // body: const MyColumnWithExpanded(),
      body: const MyColumn2(),
    );
  }
}


///
///
class MyColumn2 extends StatelessWidget {
  const MyColumn2({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Column(
      // center, start, end, spaceAround, spaceBetween, spaceEvenly
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      // center, baseline(报错), start, end, stretch
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Container(color: Colors.yellow, width: 60, height: 80,),
        Container(color: Colors.red, width: 100, height: 180,),
        Container(color: Colors.black, width: 60, height: 80,),
        Container(color: Colors.green, width: 60, height: 80,),
      ],
    );
  }
}


///
class MyColumnWithExpanded extends StatelessWidget {
  const MyColumnWithExpanded({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(flex: 1,child: Container(color: Colors.yellow, width: 60, height: 80,)),
        Container(color: Colors.red, width: 100, height: 180,),
        Container(color: Colors.black, width: 60, height: 80,),
        Expanded(flex: 1,child: Container(color: Colors.green, width: 60, height: 80,))
      ],
    );
  }
}


///
///
class MyColumn extends StatelessWidget {
  const MyColumn({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(color: Colors.yellow, width: 60, height: 80,),
        Container(color: Colors.red, width: 100, height: 180,),
        Container(color: Colors.black, width: 60, height: 80,),
        Container(color: Colors.green, width: 60, height: 80,),
      ],
    );
  }
}

